﻿@{
    Layout = null;
    ViewData["Title"] = "Index";
}
<script src="~/js/vue.js"></script>
<script src="~/js/axios.js"></script>
<script src="~/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="~/element-ui/lib/theme-chalk/index.css" />
<h1>薪酬标准登记</h1>
<div id="app">
    <el-form ref="salary_standard" :rules="rules" :model="salary_standard" label-width="120px">
        @*操作行*@
        <el-row :gutter="20">
            <el-col :span="6" :offset="17">
                <el-button type="primary" v-on:click="handleTijiao('salary_standard')">提交</el-button>
                <el-button type="warning" v-on:click="handleFanhui" style="margin-left: 20px;">返回</el-button>
            </el-col>
        </el-row>
        <div style="margin: 25px 0;"></div>
        @*第一行*@
        <el-row :gutter="20">
            <el-col :span="7">
                <el-form-item label="薪酬标准编号">
                    <el-input v-model="salary_standard.standard_id" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="7">
                <el-form-item label="薪酬标准名称" prop="standard_name" placeholder="请填写薪酬标准名称">
                    <el-input v-model="salary_standard.standard_name"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="7">
                <el-form-item label="薪酬标准总额" prop="salary_sum">
                    <el-input v-model="salary_standard.salary_sum" :disabled="true"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        @*第二行*@
        <el-row :gutter="20">
            <el-col :span="7">
                <el-form-item label="制定人" prop="designer" placeholder="请填写制定人名称">
                    <el-select v-model="salary_standard.designer" placeholder="请选择制定人">
                        <el-option v-for="item in optUsers"
                                   :key="item.u_id"
                                   :label="item.u_name"
                                   :value="item.u_name">
                        </el-option>
                    </el-select>
                    @*<el-input v-model="salary_standard.designer"></el-input>*@
                </el-form-item>
            </el-col>
            <el-col :span="7">
                <el-form-item label="登记人" prop="register" placeholder="请填写登记人名称">
                    @*<el-input v-model="salary_standard.register"></el-input>*@
                    <el-select v-model="salary_standard.register" placeholder="请选择登记人">
                        <el-option v-for="item in optUsers"
                                   :key="item.u_id"
                                   :label="item.u_name"
                                   :value="item.u_name">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="7">
                <el-form-item label="登记时间">
                    <el-date-picker v-model="salary_standard.regist_time"
                                    type="datetime"
                                    placeholder="选择日期时间" :disabled="true">
                    </el-date-picker>
                </el-form-item>
            </el-col>
        </el-row>
        @*第三行*@
        <el-row :gutter="20">
            <el-col :span="20">
                <el-form-item label="备注" prop="remark">
                    <el-input type="textarea"
                              :autosize="{ minRows: 4, maxRows: 6}"
                              placeholder="请输入备注内容"
                              v-model="salary_standard.remark">
                    </el-input>
                </el-form-item>
            </el-col>
        </el-row>
        @*第四行，复选框展示*@
        <div v-if="!tbHidden">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" v-on:change="handleCheckAllChange" border>全选</el-checkbox>
            <el-button type="primary" v-on:click="handleSalary" style="margin-left: 35px;">选择薪资组成</el-button>
            <div style="margin: 20px 0;"></div>
            <el-checkbox-group v-model="checkedCities" v-on:change="handleCheckedCitiesChange">
                <el-checkbox v-for="city in cities" :label="city" :key="city.pbc_id" border>{{city.attribute_name}}</el-checkbox>
            </el-checkbox-group>
        </div>
        @*第四行，将选中的薪酬内容转换成表格对象*@
        <el-table :data="checkedCities" v-if="tbHidden"
                  height="250"
                  border
                  style="width: 100%">
            <el-table-column prop="pbc_id"
                             label="序号"
                             width="300">
            </el-table-column>
            <el-table-column prop="attribute_name"
                             label="薪酬项目名称"
                             width="360">
            </el-table-column>
            <el-table-column prop="money"
                             label="金额"
                             width="360">
                <template slot-scope="scope">
                    <el-input-number v-model="scope.row.money" v-on:change="handleMoneyChange" controls-position="right" :precision="2" :min="0" :max="10000"></el-input-number>
                </template>
            </el-table-column>
        </el-table>
    </el-form>
</div>

<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            //薪酬标准基本信息表
            salary_standard: {
                ssd_id: '',//主键，自动增长列
                standard_id: '',//薪酬标准单编号
                standard_name: '',//薪酬标准单名称
                designer: '',// 制定人
                register: '',//登记人
                checker: '',//复核人
                changer: '',//变更人
                regist_time: '',//登记时间
                check_time: '',//复核时间
                change_time: '',//变更时间
                salary_sum: 0,//薪酬总额
                check_status: '',//是否经过复核
                change_status: '',//更改状态
                check_comment: '',//复核意见
                remark: '',//备注
            },
            //表单验证规则
            rules: {
                standard_name: [
                    { required: true, message: "请输入薪酬标准单名称！", trigger: 'blur' }
                ],
                designer: [
                    { required: true, message: "请填写制定人！", trigger: 'blur' }
                ],
                register: [
                    { required: true, message: "请填写登记人！", trigger: 'blur' }
                ],
                remark: [
                    { required: true, message: "请填写备注！", trigger: 'blur' }
                ],
                //正则验证的数据需要是保留两位小数或整数，0不行
                salary_sum: [
                    { pattern: /^([1-9]+[\d]*(.[0-9]{1,2})?)$/, message: "请选择薪资组成！", trigger: 'blur' }
                ],
            },
            //是否开启表格的隐藏
            tbHidden: false,
            //差值金额，控制加减
            diffval: [0, 0],
            //是否全选的值
            checkAll: false,
            //默认选中的项目
            checkedCities: [],
            //多选框数据源
            cities: [],
            //下拉列表框用户集合的数据源
            optUsers:[],
            //用以表示复选框 checkbox 的不确定状态
            isIndeterminate: true,
            //薪酬标准单详细信息
            salary_standard_details: [],
        },
        methods: {
            //获取当前登录的用户和薪资组成数据源
            fillUname() {
                axios.get("/SalaryStandard/SalaryConst").then((res) => {
                    console.info("cities:", res.data);
                    //公共字段里所有薪资组成集合
                    this.cities = res.data.cities;
                    //生成的最新薪酬标准编号
                    this.salary_standard.standard_id = res.data.standard_id;
                })
                //查询下拉列表框中的所有用户信息
                axios.get("/SalaryStandard/FindUsers").then((res) => {
                    console.info("optUsers:", res.data);
                    //公共字段里所有薪资组成集合
                    this.optUsers = res.data;

                })
                //当前登陆用户在下拉列表框中回显
                this.salary_standard.register = sessionStorage.getItem("userName");
            },
            //计数器文本框的值改变事件
            handleMoneyChange(val) {
                //先置空，再循环遍历已选复选框集合拿到双向绑定的money值，该money存在每个对象当中
                this.salary_standard.salary_sum = 0;
                for (var i = 0; i < this.checkedCities.length; i++) {
                    console.info("fori:", this.checkedCities[i].money);
                    //IF判断转换后的类型不为NaN，代表有值，进行递增操作
                    if (!Object.is(parseFloat(this.checkedCities[i].money), NaN)) {
                        this.salary_standard.salary_sum += parseFloat(this.checkedCities[i].money);
                    }
                }
            },
            //获取当前时间
            getNowTime() {
                var now = new Date();
                var year = now.getFullYear(); //获取年
                var month = now.getMonth();//获取月
                var date = now.getDate();//获取日
                var hours = now.getHours();//获取小时
                var minutes = now.getMinutes();//获取分钟
                var seconds = now.getSeconds();//获取秒
                month = month + 1;
                month = month.toString().padStart(2, "0");
                date = date.toString().padStart(2, "0");
                var defaultDate = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
                this.salary_standard.regist_time = new Date();
            },
            //定义时间戳
            created() {
                setInterval(() => {
                    this.getNowTime();
                }, 500);
            },
            //全选框按钮
            handleCheckAllChange(val) {
                //全选复选框为对象集合，需绑定lable的值，该checkbox的label值也要绑定为对象
                this.checkedCities = val ? this.cities.map(item => item) : [];
                this.isIndeterminate = false;
            },
            //多选框选中事件
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
                console.info(value, "this.isIndeterminate:", this.isIndeterminate);
            },
            //请选择薪资组成按钮的点击事件
            handleSalary() {
                this.tbHidden = true;
            },
            //提交按钮
            handleTijiao(ruleForm) {
                this.$refs[ruleForm].validate((valid) => {
                    //判断数据是否有效通过了验证
                    if (valid) {
                        //给薪资标准详细信息置空
                        this.salary_standard_details = [];
                        ////拿到所有复选框选中,代表要传的数组数量
                        for (var i = 0; i < this.checkedCities.length; i++) {
                            if (this.checkedCities[i].money != null && this.checkedCities[i].money != 0) {
                                this.salary_standard_details.push({
                                    standard_id: this.salary_standard.standard_id,
                                    standard_name: this.salary_standard.standard_name,
                                    item_id: this.checkedCities[i].pbc_id,
                                    item_name: this.checkedCities[i].attribute_name,
                                    salary: this.checkedCities[i].money,
                                });
                            }
                        }
                        var strjson = JSON.stringify(this.salary_standard_details);
                        axios.all(
                            //这里是薪酬标准新增
                            [axios.post("/SalaryStandard/SalaryStandardAdd", {
                                standard_id: this.salary_standard.standard_id,
                                standard_name: this.salary_standard.standard_name,
                                designer: this.salary_standard.designer,
                                register: this.salary_standard.register,
                                regist_time: this.salary_standard.regist_time,
                                //首先新增的薪资标准复核状态为0
                                check_status: 0,
                                salary_sum: this.salary_standard.salary_sum,
                                remark: this.salary_standard.remark,
                            }),
                            //这里是给薪酬标准详情新增
                            axios.get("/SalaryStandard/SalaryStandardDetailAdd?strjson=" + strjson)])
                            .then(axios.spread((ssres, ssdres) => {
                                console.info("Resoult_ssres:", ssres, ",Resoult_ssdres", ssdres);
                                if (ssres.data > 0 && ssdres.data > 0) {
                                    let me = this;
                                    //成功登记弹窗
                                    me.openSucc();
                                    //重置表单验证的所有数据
                                    me.$refs[ruleForm].resetFields();
                                    //取消薪资组成复选框的勾选并隐藏表格
                                    me.checkedCities = [];
                                    me.handleFanhui();
                                    //刷新本页面，重新获取到最新的薪酬标准ID
                                    this.fillUname();
                                }
                            }))
                    } else {
                        this.$confirm("未通过验证，请完善薪酬标准登记！");
                    }
                })
            },
            //返回按钮
            handleFanhui() {
                this.tbHidden = false;
            },
            //成功消息提示框
            openSucc() {
                this.$message({
                    message: '薪酬标准登记成功！',
                    type: 'success'
                });
            },
        },
        mounted: function() {
            //计时器
            this.created();
            this.fillUname();
        }

    })

</script>
